<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>order</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
	</head>
	<body>
		<div class="layui-fluid">
			<div class="layui-card">
				<div class="layui-form layui-card-header card-header-auto">
					<div class="layui-form-item">
						<div class="layui-inline">
							<button id="query" style="margin-left: 110px;" class="layui-btn" lay-submit lay-filter="query">
								<i class="layui-icon layui-icon-search"></i>
							</button>
						</div>
					</div>
				</div>

				<div class="layui-card-body">
					<div style="padding-bottom: 10px;">
						<button class="layui-btn" btn-event="batchDel">批量删除</button>
						<button class="layui-btn" btn-event="add">添加</button>
					</div>
					<table id="table-list" lay-filter="table-list"></table>
				</div>
			</div>
		</div>
		
		<!--新增弹窗-->
		<div class="layui-form" lay-filter="form-add" id="form-add" style="padding: 20px 0 0 0;display: none;">
            <div class="layui-form-item">
            <input type="hidden" name="odId">
                <div class="layui-inline">
                    <label class="layui-form-label">用户(t_sm_user)</label>
                    <div class="layui-input-inline">
                        <input type="text" name="usId" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">总费用</label>
                    <div class="layui-input-inline">
                        <input type="text" name="odTotalfee" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-inline">
                        <input type="text" name="odRemark" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
			<div class="layui-form-item layui-hide">
				<input type="button" lay-submit lay-filter="btn-add" id="btn-add" value="保存">
			</div>
		</div>
		
		<script type="text/html" id="ops">
			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
		</script>

		<script src="../static/plugins/layui/layui.js"></script>
		<script>
			layui.config({
				base: '../static/js/'
			}).use(['form', 'table', 'layer','common'], function() {
				var table = layui.table
				,layer = layui.layer
				,form = layui.form
				,cn = layui.common
				,order = {
					init: function() {
						//表格渲染
						order.renderTable();
						
						//事件绑定
						$("*[btn-event]").click(function(){
							var e = $(this), eventName = e.attr('btn-event');
                            order[eventName].call(e);
						})
						
						//查询
						form.on('submit(query)', function(data){
							order.query(data.field);
						});
						//保存
						form.on('submit(btn-add)', function(data) {
							cn.requestJSON('/bs/order/save', data.field, function(res){
								if(res.code == 0){
									layer.msg('保存成功');
									$("#query").click();
									setTimeout(function(){
										layer.close($(data.elem).attr('index'));
									}, 1100)
								}else{
									layer.msg(res.msg);
								}
							})
						});
					},
					renderTable: function() {
						var param = {
							fieldValues:[
								{
									field:'od.modify_time',
									sqlKeyword:'orderByDesc',
								}
							]
						};
						table.render({
							elem: '#table-list',
							height: 400,
							url: cn.getPath('/bs/order/page'),
							page: true,
							method: 'POST',
							contentType: 'application/json',
							admin: true,
							where: param,
							cols: [[
							  {type:'checkbox'}
                              ,{field:'odId', title: '编号', width:150, sort: true}
                              ,{field:'usId', title: '用户(t_sm_user)', width:150, sort: true}
                              ,{field:'usName', title: 'us_name', width:150, sort: true}
                              ,{field:'odTotalfee', title: '总费用', width:150, sort: true}
                              ,{field:'odRemark', title: '备注', minWidth:150, sort: true}
							  ,{tableName:'操作', width:146, templet: '#ops', unresize: true}
							]]
						});
						//监听行工具事件
						table.on('tool(table-list)', function(obj) {
							var data = obj.data;
							if (obj.event === 'del') {
								order.del(data.odId);
							} else if (obj.event === 'edit') {
								order.add(data);
							}
						});
					},
					query: function (obj) {
						var param = {
							fieldValues:[
                                {
                                    field:'us_name',
                                    sqlKeyword:'like',
                                    value:obj.usName
                                },
							]
						};
						table.reload('table-list', {
							url: cn.getPath('/bs/order/page')
							,where: param //设定异步数据接口的额外参数
							,page: {
								curr: 1 //重新从第 1 页开始
							}
						});
					},
					del:function(usId){
						layer.confirm('确定删除？', function(index) {
							cn.request('/bs/order/removeById', {id:usId}, function(res){
								if(res.code == 0){
									cn.success('删除成功');
									$("#query").click();
								}else{
									cn.error(res.msg);
								}
							})
							layer.close(index);
						});
					},
					batchDel: function() {
						var checkStatus = table.checkStatus('table-list'),
							checkData = checkStatus.data,
							usIds = '';
						if (checkData.length === 0) {
							return cn.error('请选择数据！');
						}
						$.each(checkData,function(i, item){
							usIds += item.odId;
							if(i != checkData.length-1){
								usIds += ',';
							}
						})
						layer.confirm('确定批量删除？', function(index) {
							cn.request('/bs/order/removeByIds', {ids:usIds}, function(res){
								if(res.code == 0){
									cn.success('批量删除成功');
									$("#query").click();
								}else{
									cn.error(res.msg);
								}
							})
							layer.close(index);
						});
					},
					add: function(editData) {
						//清空表单
						order.clearForm();
						if(editData){
							//修改赋值
							form.val("form-add", editData);
						}
						
						//打开弹窗
						layer.open({
							type: 1,
							tableName: '添加',
							content: $("#form-add"),
							maxmin: true,
							area: ['680px', '356px'],
							btn: ['确定', '取消'],
							yes: function(index, layero) {
								var addBtn = layero.find("#btn-add");
								addBtn.attr('index', index);
								addBtn.click();
							}
						});
					},
					clearForm:function(){
						var formData = form.val("form-add");
						for(var i in formData){
							formData[i] = '';
						}
						form.val("form-add", formData);
					}
				}
				order.init();
			})
		</script>
	</body>
</html>
